import 'package:flutter/material.dart';
// import 'package:netease_music/icons/my_flutter_app_icons.dart';
import 'package:netease_music/models/recommend_play_list_item.dart';
import 'package:netease_music/theme/custom_colors.dart';
import 'package:netease_music/widget/my_cached_network_image.dart';

class RecommendPlayList extends StatelessWidget {
  final List<RecommendPlayListItem> recommentList;
  const RecommendPlayList({
    super.key,
    required this.recommentList,
  });

  @override
  Widget build(BuildContext context) {
    // 动态计算出的固定高度
    final double imgWidth = (MediaQuery.of(context).size.width - 16 - 24) / 3;
    return Padding(
      padding: const EdgeInsets.all(12),
      child: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: Row(
                  children: [
                    Icon(
                      Icons.event_available,
                      size: 18,
                      color: Theme.of(context).primaryColor,
                    ),
                    const SizedBox(width: 2),
                    Text(
                      '推荐歌单',
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                  ],
                ),
              ),
              GestureDetector(
                onTap: () {},
                child: Text(
                  '更多',
                  style: Theme.of(context).textTheme.bodyMedium,
                ),
              ),
              Icon(
                Icons.chevron_right,
                size: 14,
                color: Theme.of(context).extension<CustomColors>()!.borderColor,
              ),
            ],
          ),
          const SizedBox(
            height: 6,
          ),
          SizedBox(
            // 不使用滚动功能 使用grid的布局功能
            child: GridView.builder(
              shrinkWrap: true, // GridView 的大小（主要是高度）根据内容自适应
              physics: const NeverScrollableScrollPhysics(), // 禁止内部滚动
              itemCount: recommentList.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 16,
                crossAxisSpacing: 8,
                childAspectRatio: 0.75, // 宽高比
              ),
              itemBuilder: (context, index) {
                return Stack(
                  children: [
                    SizedBox(
                      child: Column(
                        children: [
                          SizedBox(
                            width: imgWidth,
                            height: imgWidth,
                            child: MyCachedNetworkImage(
                              imageUrl: recommentList[index].picUrl,
                              width: imgWidth,
                              height: imgWidth,
                              x: 500,
                              y: 500,
                            ),
                          ),
                          Text(
                            recommentList[index].name,
                            maxLines: 2,
                            style: Theme.of(context).textTheme.bodyMedium,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ],
                      ),
                    ),
                    Positioned(
                      top: 0,
                      left: 0,
                      right: 0,
                      child: Container(
                        height: 24,
                        color: Colors.black.withOpacity(0.1),
                        child: Padding(
                          padding: const EdgeInsets.only(
                            left: 6,
                            right: 6,
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              // const Icon(
                              //   MyFlutterApp.myicon,
                              //   size: 16,
                              //   color: AppColors.whiter,
                              // ),
                              Expanded(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    Icon(
                                      Icons.headset,
                                      size: 10,
                                      color: Theme.of(context)
                                          .extension<CustomColors>()!
                                          .iconColor,
                                    ),
                                    const SizedBox(width: 4),
                                    Text(
                                      '${recommentList[index].playCount / 1000}万',
                                      style: TextStyle(
                                        fontSize: 10,
                                        color: Theme.of(context)
                                            .extension<CustomColors>()!
                                            .iconColor,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    )
                  ],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
